<template>
  <div class="image-container">
    <img :src="fileUrl" alt="图片预览" class="preview-image" />
  </div>
</template>

<script setup>
defineProps({
  fileUrl: {
    type: String,
    required: true
  }
});
</script>

<style scoped>
.image-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111827;
  padding: 16px;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .image-container {
    padding: 8px;
    min-height: 70vh;
  }
}
</style> 